<template>
  <view class="upload-container">
    <!-- 根据平台动态渲染不同的上传组件 -->
    <DocumentUploadH5
      v-if="isH5"
      :button-text="buttonText"
      :upload-text="uploadText"
      :auto-upload="autoUpload"
      @success="handleSuccess"
      @error="handleError"
      @progress="handleProgress"
    />

    <DocumentUploadWeixin
      v-else-if="isWeixin"
      :button-text="buttonText"
      :upload-text="uploadText"
      :auto-upload="autoUpload"
      @success="handleSuccess"
      @error="handleError"
      @progress="handleProgress"
    />

    <!-- 默认显示 -->
    <view v-else class="platform-detecting">
      <text>检测平台中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import DocumentUploadH5 from "./DocumentUploadH5.vue";
import DocumentUploadWeixin from "./DocumentUploadWeixin.vue";

// Props
const props = defineProps({
  buttonText: {
    type: String,
    default: "选择文件",
  },
  uploadText: {
    type: String,
    default: "开始上传",
  },
  autoUpload: {
    type: Boolean,
    default: false,
  },
});

// Emits
const emit = defineEmits(["success", "error", "progress"]);

// 平台检测
const platform = ref(null);

// 计算属性 - 根据平台判断
const isH5 = computed(() => platform.value === "h5");
const isWeixin = computed(() => platform.value === "weixin");

// 平台检测逻辑
const detectPlatform = () => {
  // #ifdef H5
  platform.value = "h5";
  console.log("检测到H5平台");
  // #endif

  // #ifdef MP-WEIXIN
  platform.value = "weixin";
  console.log("检测到微信小程序平台");
  // #endif

  // #ifdef APP-PLUS
  platform.value = "app";
  console.log("检测到APP平台，使用H5上传方式");
  // #endif

  // 如果没有检测到平台，默认为H5
  if (!platform.value) {
    platform.value = "h5";
    console.log("未检测到平台，默认使用H5上传方式");
  }
};

// 事件处理
const handleSuccess = (data) => {
  console.log("上传成功:", data);
  emit("success", data);
};

const handleError = (error) => {
  console.error("上传失败:", error);
  emit("error", error);
};

const handleProgress = (progress) => {
  emit("progress", progress);
};

// 组件挂载时检测平台
onMounted(() => {
  detectPlatform();
});

// 暴露方法给父组件
defineExpose({
  // 根据平台调用相应的方法
  selectFile: () => {
    if (isH5.value) {
      // 调用H5组件的selectFile方法
      const h5Component = document.querySelector(
        '[data-component="document-upload-h5"]'
      );
      if (h5Component && h5Component.__vueParentComponent) {
        h5Component.__vueParentComponent.exposed?.selectFile();
      }
    } else if (isWeixin.value) {
      // 调用微信小程序组件的selectFile方法
      // 这里需要通过ref来调用
    }
  },
  uploadFile: () => {
    if (isH5.value) {
      // 调用H5组件的uploadFile方法
    } else if (isWeixin.value) {
      // 调用微信小程序组件的uploadFile方法
    }
  },
  removeFile: () => {
    if (isH5.value) {
      // 调用H5组件的removeFile方法
    } else if (isWeixin.value) {
      // 调用微信小程序组件的removeFile方法
    }
  },
});
</script>

<style lang="scss" scoped>
.upload-container {
  width: 100%;
}

.platform-detecting {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  color: rgba(255, 255, 255, 0.7);
  font-size: 28rpx;
}
</style>
